<template>
  <view class="container">
    <view class="box">
      <textarea
        maxlength="-1"
        placeholder="请输入举报原因"
		v-model="content"
        style="width: 626rpx; height: 240rpx; font-family: Source Han Sans SC, Source Han Sans SC; font-weight: 400; font-size: 32rpx; color: #666666"
      ></textarea>
    </view>
    <view style="font-weight: bold; font-size: 28rpx; color: #1e1e1e">上传举报截图(最多上传9张)</view>
    <view style="margin-top: 22rpx;">
		<cl-upload
		v-model="urls" 
		:action="url" 
		:headers="{
			token:token
		}"
		fileType="image"
		:closeImg="true"
		fileName="file"
		:useBeforeDelete="true"
		@beforeDelete="beforeDelete"
		@onSuccess="onSuccess">
		</cl-upload>
      <!-- <image src="../../static/logo.png" style="width: 200rpx; height: 200rpx; margin: 10rpx" v-for="index in 7" mode=""></image> -->
      <!-- <image src="../../static/upimgwhite.png" style="width: 200rpx; height: 200rpx; margin: 10rpx" mode=""></image> -->
    </view>
    <!-- 提交 -->
    <view class="sub">
      <view class="submit" @click="jubao">提交</view>
    </view>
  </view>
</template>

<script>
	import {
		mapState
	}from 'vuex'
export default {
  data() {
    return {
		id:null,
		urls: [],
		banurl:[],
		content:'',
		url:'',
	};
  },
  onLoad(data) {
  	this.id = data.id
	this.url = this.$uploadUrl
  },
  computed:{
  	...mapState(['token'])
  },
  methods:{
	  //选择图片
	  beforeDelete(item, index, next){
	  	this.banurl.splice(index,1)
	  	this.urls.splice(index,1)
	  },
	  onSuccess(e){
	  	console.log('上传成功',e);
	  	if(e.code == 1){
	  		this.banurl.push(e.data.url)
	  		this.urls.push(e.data.fullurl)
	  	}else{
	  		uni.showToast({
	  			title:e.msg
	  		})
	  	}
	  	
	  },
	  //举报
	  jubao(){
		  if(this.content == '')return uni.showToast({
		  	title:'请输入举报原因'
		  })
		  this.http('/group/report',{
			  group_id:this.id,
			  content:this.content,
			  images:this.banurl.join()
		  }).then(res =>{
			  if(res.code == 1){
				  uni.showToast({
				  	title:res.msg,
					success: () => {
						setTimeout(()=>{
							uni.navigateBack()
						},800)
					}
				  })
				  
			  }
		  })
	  }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 22rpx 30rpx;
  .box {
    box-sizing: border-box;
    padding: 24rpx 30rpx;
    width: 690rpx;
    height: 320rpx;
    background: #f1edf0;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin-bottom: 64rpx;
  }
  .sub {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 156rpx;
    background: #ffffff;
    box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.12);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    .submit {
      box-sizing: border-box;
      width: 690rpx;
      height: 80rpx;
      background: #feff01;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #151515;
      text-align: center;
      line-height: 80rpx;
      margin: 8rpx 30rpx;
    }
  }
}
</style>
